/**
 * 包含多选框的下拉列表，含全选和全不选操作
 * */
import { useEffect, useState, useCallback, useRef } from 'react';
import { Checkbox, Button, message } from 'antd';
import './index.less';
import { EyeOutlined } from '@ant-design/icons';
export interface optionsListProps {
  label: string | number;
  value: string | number;
}
export type numberOrStringArr = string[] | number[];

const CheckboxSelect = (props: {
  optionsList: optionsListProps[];
  changeCallback: (data: numberOrStringArr) => void;
  optionsListSelected: numberOrStringArr;
}) => {
  const { optionsList, changeCallback, optionsListSelected } = props;

  const confirmBtn = useRef<any>();
  const [isActive, setIsActive] = useState<boolean>(false);
  const [checkboxValList, setCheckboxValList] = useState<numberOrStringArr>([]);
  const [checkboxOldValList, setCheckboxOldValList] = useState<numberOrStringArr>([]);

  // 多选框列表被触发的时候
  const checkboxChange = (list: any) => {
    setCheckboxValList(list);
  };
  useEffect(() => {
    console.log(isActive, 'isActive');
  }, [isActive]);
  // 确定操作
  const confirm = () => {
    if (checkboxValList.length < 1) {
      return message.error('必须要有一列宽');
    }
    setCheckboxOldValList(checkboxValList);
    setIsActive(false);
    // 返回最终数据
    changeCallback(checkboxValList);
  };
  // 取消操作
  const cancel = () => {
    setCheckboxValList(checkboxOldValList);
    setIsActive(false);
  };
  // 点击操作
  const toggleClick = (ev: { stopPropagation: () => void }) => {
    ev.stopPropagation();
    const status = !isActive;
    setIsActive(status);
  };

  // 触发内容区域
  const documentEvent = () => {
    (confirmBtn as any).current.click();
  };

  // 组件卸载
  const unComponent = () => {
    // console.log('组件卸载');
    document.removeEventListener('click', documentEvent);
  };

  // 初始操作
  const init = useCallback(() => {
    // 设置checkbox默认选中
    setCheckboxValList(optionsListSelected);
    setCheckboxOldValList(optionsListSelected);
    // 空白文档处被点击
    document.addEventListener('click', documentEvent);
  }, []);

  useEffect(() => {
    init();
    return unComponent;
  }, []);

  return (
    <>
      <div className={`checkbox-select ${isActive ? 'checkbox-select-active' : ''}`}>
        <EyeOutlined onClick={toggleClick} style={{ cursor: 'pointer' }} />
        <div
          className='cs__tool'
          onClick={ev => {
            ev.stopPropagation();
            ev.nativeEvent.stopImmediatePropagation();
          }}
        >
          <Checkbox.Group onChange={checkboxChange} value={checkboxValList}>
            <ul className='cs__checkbox-list'>
              {optionsList.length ? (
                optionsList.map((item: optionsListProps) => {
                  return (
                    <li key={item.value}>
                      <Checkbox value={item.value}>{item.label}</Checkbox>
                    </li>
                  );
                })
              ) : (
                <li className='empty'>暂无数据</li>
              )}
            </ul>
          </Checkbox.Group>

          <div className='cs__button' style={{ display: optionsList.length ? '' : 'none' }}>
            {/* <Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>
              全选/全不选
            </Checkbox> */}
            <Button type='primary' size='small' onClick={confirm} ref={confirmBtn}>
              确定
            </Button>
            <Button size='small' onClick={cancel}>
              取消
            </Button>
          </div>
        </div>
      </div>
    </>
  );
};

export default CheckboxSelect;
